<template>
	<view class="decLoanIndex">
		<nav-bars bgColor="transparent"></nav-bars>
		<view class="formContent">
			<view class="cardImgBox">
				<text>请上传第二代身份证</text>
				<view class="text">
					<image :src="`${baseImg}/static/adminShop/decLoan/please.png`" mode=""></image>
					该证件信息仅用于办理装修贷款
				</view>
				<view class="uploadCard">
					<view class="item" @click="uploadFN(1)">
						<image v-if="topCardImg" :src="topCardImg" mode=""></image>
						<image v-else :src="`${baseImg}/static/adminShop/decLoan/topCard.png`" mode=""></image>
					</view>
					<view class="item" @click="uploadFN(2)">
						<image v-if="backCardImg" :src="backCardImg" mode=""></image>
						<image v-else :src="`${baseImg}/static/adminShop/decLoan/backCard.png`" mode=""></image>
					</view>
				</view>
			</view>
			<view class="infoBox">
				<text class="title">个人身份信息</text>
				<view class="item">
					<text>姓名</text>
					<input type="text" value="" v-model="form.name" placeholder-class="inputPlace" placeholder="姓名" />
				</view>
				<view class="item">
					<text>身份证号码</text>
					<input type="text" value="" v-model="form.id_no" placeholder-class="inputPlace" placeholder="请输入身份证号码"/>
				</view>
				<view class="item">
					<text>手机号码</text>
					<input type="text" value="" maxlength="11" v-model="form.phone" placeholder-class="inputPlace" placeholder="请输入手机号码"/>
				</view>
				<view class="item">
					<text>婚姻状况</text>
					<view class="select" :class="{'active':form.is_marry!=''}" @click="openSelect(1)">
						{{form.is_marry?form.is_marry:'请选择'}}<view class="iconfont icon-more"></view>
					</view>
				</view>
				<view class="item">
					<text>学历</text>
					<view class="select" :class="{'active':form.education!=''}" @click="openSelect(2)">
						{{form.education?form.education:'请选择'}}<view class="iconfont icon-more"></view>
					</view>
				</view>
				<view class="item">
					<text>月收入</text>
					<view class="select" :class="{'active':form.month_income!=''}" @click="openSelect(3)">
						{{form.month_income?form.month_income:'请选择'}}<view class="iconfont icon-more"></view>
					</view>
				</view>
				<view class="item">
					<text>所在地区</text>
					<view class="select" :class="{'active':province!=''}">
						<biaofun-region v-if="form.province" @change="onChangeRegion" :defaultValue="defaultValue"></biaofun-region>  
						<biaofun-region v-else @change="onChangeRegion"></biaofun-region>  
						<view class="iconfont icon-more"></view>
					</view>
				</view>
				<view class="item">
					<text>详细地址</text>
					<input type="text" value="" v-model="form.address" placeholder-class="inputPlace" placeholder="请输入详细地址"/>
				</view>
				<view class="contacts">
					<text class="contactsEme">紧急联系人</text>
					<view class="item">
						<text>联系人姓名</text>
						<input type="text" value="" v-model="contacts1.name" placeholder-class="inputPlace" placeholder="请输入联系人姓名" />
					</view>
					<view class="item">
						<text>联系人关系</text>
						<view class="select" :class="{'active':contacts1.relation!=''}" @click="openSelect(4)">
							{{contacts1.relation?contacts1.relation:'请选择'}}<view class="iconfont icon-more"></view>
						</view>
					</view>
					<view class="item">
						<text>联系人联系方式</text>
						<input type="number" value="" maxlength="11" v-model="contacts1.phone" placeholder-class="inputPlace" placeholder="请输入联系人联系方式" />
					</view>
				</view>
				<!-- <view class="contacts">
					<text class="contactsEme">紧急联系人2</text>
					<view class="item">
						<text>联系人姓名</text>
						<input type="text" value="" v-model="contacts2.name" placeholder-class="inputPlace" placeholder="请输入联系人姓名" />
					</view>
					<view class="item">
						<text>联系人关系</text>
						<view class="select" @click="openSelect(5)">
							{{contacts2.relation?contacts2.relation:'请选择与联系人的关系'}}<view class="iconfont icon-more"></view>
						</view>
					</view>
					<view class="item">
						<text>联系人联系方式</text>
						<input type="text" value="" v-model="contacts2.phone" placeholder-class="inputPlace" placeholder="请输入联系人联系方式" />
					</view>
				</view>
				<view class="contacts">
					<text class="contactsEme">紧急联系人3</text>
					<view class="item">
						<text>联系人姓名</text>
						<input type="text" value="" v-model="contacts3.name" placeholder-class="inputPlace" placeholder="请输入联系人姓名" />
					</view>
					<view class="item">
						<text>联系人关系</text>
						<view class="select" @click="openSelect(6)">
							{{contacts3.relation?contacts3.relation:'请选择与联系人的关系'}}<view class="iconfont icon-more"></view>
						</view>
					</view>
					<view class="item">
						<text>联系人联系方式</text>
						<input type="text" value="" v-model="contacts3.phone" placeholder-class="inputPlace" placeholder="请输入联系人联系方式" />
					</view>
				</view> -->
			</view>
			<u-select v-model="show" :list="list" @confirm="confirmSelect"></u-select>
			<view class="btn">
				<button type="default" @click="toNext">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js';
	import biaofunRegion from '@/pages_decLoan/components/biaofun-region/biaofun-region.vue';
	import service_decLoan from '@/service/decLoan.js'
	export default{
		components: {biaofunRegion},
		data(){
			return{
				baseImg:this.$static,
				form:{
					id:null,
					id_no_front:'', //身份证正面照id
					id_no_back:'', 	//身份证反面照id
					name:'',		//姓名
					id_no:'',		//身份证号
					phone:'', 		//手机号码
					is_marry:'',	//婚姻
					education:'',	//学历
					month_income:'',//月收入
					province_id:'',
					city_id:'',
					district_id:'',
					province:'',
					city:'',
					district:'',
					address:'',
					urgent_contact:''
				},
				topCardId:'',
				backCardId:'',
				topCardImg:'', //身份证正面照url
				backCardImg:'', //身份证反面照url
				show:false,
				list:[],
				selectType:'',
				contacts1:{
					name:'',
					relation:'',
					phone:'',
				},
				contacts2:{
					name:'',
					relation:'',
					phone:'',
				},
				contacts3:{
					name:'',
					relation:'',
					phone:'',
				},
				urlStatus:null, //编辑还是新增0新增1编辑
				defaultValue:[]
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.getDetail()
		},
		methods:{
			// 获取详情
			getDetail(){
				service_decLoan.getLoanArchive().then(res=>{
					console.log(res,'详情')
					if(res.code==1){
						if(Array.isArray(res.data) && !res.data.length){
							this.urlStatus = 0
						}else{
							this.urlStatus = 1
							this.form = res.data
							this.form.is_marry = res.data.is_marry==1?'已婚':'未婚';
							this.topCardId = res.data.id_no_front?res.data.id_no_front.id:'';
							this.backCardId = res.data.id_no_back?res.data.id_no_back.id:'';
							this.topCardImg = res.data.id_no_front?res.data.id_no_front.path:'';
							this.backCardImg = res.data.id_no_back?res.data.id_no_back.path:'';
							if(res.data.province){
								this.defaultValue = [res.data.province,res.data.city,res.data.district];
							}
							if(res.data.urgent_contact){
								this.contacts1 = res.data.urgent_contact[0]?res.data.urgent_contact[0]:{}
								this.contacts2 = res.data.urgent_contact[1]?res.data.urgent_contact[1]:{}
								this.contacts3 = res.data.urgent_contact[2]?res.data.urgent_contact[2]:{}
							}
						}
					}
					console.log(this.urlStatus,'000')
				})
			},
			
			// 下一步按钮
			toNext(){
				if(this.topCardId==''){uni.showToast({title:'请上传身份证正面',icon:'none'}); return};
				if(this.backCardId==''){uni.showToast({title:'请上传身份证反面',icon:'none'}); return};
				if(this.form.name==''){uni.showToast({title:'请输入姓名',icon:'none'}); return};
				if(this.form.id_no==''){uni.showToast({title:'请输入身份证号',icon:'none'}); return};
				if(this.form.phone==''){uni.showToast({title:'请输入手机号码',icon:'none'}); return};
				if(this.form.is_marry==''){uni.showToast({title:'请选择婚姻状况',icon:'none'}); return};
				if(this.form.education==''){uni.showToast({title:'请选择学历',icon:'none'}); return};
				if(this.form.month_income==''){uni.showToast({title:'请选择月收入',icon:'none'}); return};
				if(this.form.province_id=='' && this.form.city_id=='' && this.form.district_id==''){uni.showToast({title:'请选择地区',icon:'none'}); return};
				if(this.form.address==''){uni.showToast({title:'请填写详细地址',icon:'none'}); return};
				let arr = []
				if(this.contacts1.name!=''&&this.contacts1.relation!=''&&this.contacts1.phone!=''){
					arr.push(this.contacts1)
					this.form.urgent_contact = JSON.stringify(arr)
				}else{
					uni.showToast({
						title:'请完善紧急联系人信息',
						icon:'none'
					})
					return
				}
				if(this.form.phone==this.contacts1.phone){
					uni.showToast({
						title:'紧急联系人手机号不可与个人手机号相同',
						icon:'none'
					})
					return
				}
				// if(this.contacts2.name!=''&&this.contacts2.relation!=''&&this.contacts2.phone!=''){
				// 	arr.push(this.contacts2)
				// }
				// if(this.contacts3.name!=''&&this.contacts3.relation!=''&&this.contacts3.phone!=''){
				// 	arr.push(this.contacts3)
				// }
				
				// console.log(arr,'联系人')
				// if(arr.length>=2){
					// this.form.urgent_contact = JSON.stringify(arr)
				// }else{
				// 	uni.showToast({
				// 		title:'请至少填写完善两位紧急联系人',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				this.form.id_no_front = this.topCardId
				this.form.id_no_back = this.backCardId
				this.form.urlStatus = this.urlStatus
				this.form.is_marry=='已婚'?1:0
				console.log(this.form.urgent_contact,'联系人')
				console.log(this.form,'新增提交数据')
				service_decLoan.newLoanArchive(this.form).then(res=>{
					console.log(res,'新增贷款档案结果')
					if(res.code==1){
						// uni.showToast({
						// 	title:'身份信息提交成功',
						// 	icon:'success'
						// })
						uni.navigateTo({
							url:'../apply/apply'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			// 打开选择
			openSelect(type){
				this.selectType = type
				this.show = true
				if(type==1){
					this.list=[{
						label:'未婚',
						value:'未婚'
					},{
						label:'已婚',
						value:'已婚'
					}]
				}else if(type==2){
					this.list=[{
						label:'初中',
						value:'初中'
					},{
						label:'高中/中专',
						value:'高中/中专'
					},{
						label:'大专/本科',
						value:'大专/本科'
					},{
						label:'硕士',
						value:'硕士'
					},{
						label:'博士及以上',
						value:'博士及以上'
					},]
				}else if(type==3){
					this.list=[{
						label:'3000及以下',
						value:'3000及以下'
					},{
						label:'3001-5000',
						value:'3001-5000'
					},{
						label:'5001-8000',
						value:'5001-8000'
					},{
						label:'8001-10000',
						value:'8001-10000'
					},{
						label:'10001-15000',
						value:'10001-15000'
					},{
						label:'15001-20000',
						value:'15001-20000'
					},{
						label:'20000以上',
						value:'20000以上'
					},]
				}else{
					this.list=[{
						label:'父母',
						value:'父母'
					},{
						label:'配偶',
						value:'配偶'
					},{
						label:'子女',
						value:'子女'
					}]
				}
			},
			// 选择确定
			confirmSelect(e){
				console.log(e,'选择结果')
				if(this.selectType==1){
					this.form.is_marry = e[0].value
				}else if (this.selectType==2){
					this.form.education = e[0].value
				}else if (this.selectType==3){
					this.form.month_income = e[0].value
				}else if (this.selectType==4){
					this.contacts1.relation = e[0].value
				}else if (this.selectType==5){
					this.contacts2.relation = e[0].value
				}else if (this.selectType==6){
					this.contacts3.relation = e[0].value
				}
			},
			// 选择地区
			onChangeRegion(region) {
				console.log(region,'选择区域')
				this.form.province = region[0].name,
				this.form.city= region[1].name,
				this.form.district = region[2].name
				this.form.province_id = region[0].id,
				this.form.city_id = region[1].id,
				this.form.district_id = region[2].id
				this.defaultValue = [region[0].name,region[1].name,region[2].name]
			},
			
			// 上传身份证
			uploadFN(num){
				uni.chooseImage({
					count:1,
				    success: (res) => {
				        const tempFilePaths = res.tempFilePaths;
				        uni.uploadFile({
				            url: URL.ENTER_UPLOAD_IMAGE,
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.showLoading({
									title:'上传中'
								})
				                console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if(data.code==1){
									if(num==1){ //1正面，2反面
										this.topCardImg = data.data.url;
										this.topCardId = data.data.id
									}else{
										this.backCardImg = data.data.url;
										this.backCardId = data.data.id
									}
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none'
									})
								}
								setTimeout(function(){
									uni.hideLoading()
								},500)
				            }
				        });
				    }
				});
			},
		}
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.decLoanIndex{
		height: 100%;
		background-color: #f1f1f1;
		.formContent{
			width: 100%;
			margin-bottom: 20rpx;
			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			// 身份证
			.cardImgBox{
				padding: 50rpx 20rpx;
				width: 690rpx;
				margin: 20rpx auto;
				border-radius: 10rpx;
				background-color: #fff;
				text{font: bold 36rpx/50rpx PingFang SC;color: #333;}
				.text{
					display: flex;
					align-items: center;
					image{
						width: 24rpx;
						height: 24rpx;
						margin-right: 5rpx;
					}
					font: 500 26rpx/35rpx PingFang SC;
					color: #C3AB7C;
				}
				.uploadCard{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 40rpx;
					.item{
						width: 310rpx;
						height: 230rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			
			// 信息
			.infoBox{
				width: 690rpx;
				margin: 20rpx auto;
				padding: 50rpx 30rpx 50rpx 20rpx;
				border-radius: 10rpx;
				background-color: #fff;
				.title{font: bold 36rpx/50rpx PingFang SC;color: #333;}
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #F1F1F1;
					padding: 40rpx 0 30rpx 0 ;
					font: 500 30rpx/30rpx PingFang SC;
					color: #333;
					text{
						
					}
					input{
						width: 50%;
						text-align: right;
						font: 500 30rpx/30rpx PingFang SC;
						color: #333;
					}
					.select{
						display: flex;
						align-items: center;
						color: #999;
					}
					.active{
						color: #333;
					}
					.inputPlace{
						font: 500 30rpx/30rpx PingFang SC;
						color: #999;
					}
					.iconfont{
						color: #999;
						font-size: 30rpx;
					}
				}
				.contacts{
					margin-top: 30rpx;
					.contactsEme{
						font: 500 26rpx/30rpx PingFang SC;
						color: #C3AB7C;
					}
				}
			}
			
			// 按钮
			.btn{
				width: 100%;
				button{
					width: 650rpx;
					height: 90rpx;
					margin: 20rpx auto;
					background-color: #C3AB7C;
					border-radius: 10rpx;
					font: 500 34rpx/90rpx PingFang SC;
					color: #fff;
				}
			}
		}
	}
	
</style>
